<section class="about m-5">
    <style>
        .about .list {
            list-style-type: none;
        }

        .about .list li {
            height: 80px;
            text-align: center;
            background-color: black;
            color: white;
        }

        .about .list li.select {
            color: black;
            background-color: white;
        }

        .about .list li label:first-child {
            font-weight: bold;
            font-size: 20px;
            display: block;
        }
    </style>
    <script>
        window.addEventListener('load', function() {
            // 监听单击事件
            document.querySelectorAll(".about .list li").forEach(li => {
                console.log(li);
                li.addEventListener('click', function(e) {
                    // 移除当前选中的元素
                    document.querySelector('.about .list li.select').classList.remove('select')
                    // 将当前被点击的元素设置为选中
                    this.classList.add('select')
                    // 将自己携带的文本数据显示到视图上
                    document.querySelector('.about .view').innerHTML = this.getAttribute('data-text');
                })
            })
            // 初始化动作
            const first_li = document.querySelector('.about .list li');
            first_li.classList.add('select')
            document.querySelector('.about .view').innerHTML = first_li.getAttribute('data-text');

        })
    </script>
    <div class="title">
        <div class="text">ABOUT US</div>
        <div class="descript">关于我们</div>
        <div class="title_line"></div>
    </div>
    <div class="row align-items-center" style="margin: 120px 0;">
        <div class="col-lg-4">
            <ul class="list p-0">
                <li class="d-flex justify-content-center flex-column" data-text="维刻科技（深圳）有限公司创始于2014年，是一家全球性消费级雾化器品牌公司，以技术驱动、产品创新为导向，致力于为消费者创造轻健康生活，提供VEEX维刻品牌雾化器的研发、设计、销售和雾化器解决方案销售。">
                    <label>公司介绍</label>
                    <label>COMPANY INTRODUCTION</label>
                </li>
                <li class="d-flex justify-content-center flex-column" data-text="维刻秉承“科技研发，以人为本”的品牌理念，通过研发、精控、选料，保障消费者的使用安全。从V1经典系列至V4派系列，乃至IECIE上海蒸汽文化周中将会与大家见面的多款新品系列，每款产品的创造初衷，均是以对用户体验的追求为目标而迸发。通过将科技与最舒适的人体工艺重构，产生了一种新颖独特，高辨识度的产品语言。">
                    <label>品牌介绍</label>
                    <label>BRAND INTRODUCTION</label>
                </li>
                <li class="d-flex justify-content-center flex-column" data-text="2018年【第六届群星MARS⼤赛】最具潜⼒奖、2018年【互联⽹⽜⽿⽂娱盛典】创投领域年度新锐企业 、 2020年⼊选
                        产品年度榜单VAPE品牌前三名、2020年雾化新势⼒年度渠道品牌新锐">
                    <label>企业荣誉</label>
                    <label>CORPORATE HONOR</label>
                </li>
            </ul>
        </div>
        <div class="col-lg-8">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <img class="w-100" src="./images/home/CompanyHonor.jpg" alt="关于我们">
                </div>
                <div class="col-md-6 view" style="text-indent: 2em;">

                </div>
            </div>
        </div>
    </div>
</section>